<template>
  <div class="headerTwo">
    <div class="black">
      <div class="width headeOne">
        <div class="logo">
          <!-- <img src="" alt="">  :style="{backgroundImage: 'url('+ (coverImgUrl ? logoTwo : logoOne)+')'}"-->
          <router-link to="/"></router-link>
        </div>
        <div class="content">
          <span class="phoneIcon"></span>
          <span class="phone">{{ phone }}</span>
          <span class="wchat"></span>
        </div>
      </div>
    </div>
    <div class="white">
      <ul class="width">
        <li v-for="(item, index) in navList" :key="index">
          <router-link :to="{ path: item.url }">
            {{ item.title }}
          </router-link>
          <ul>
            <li v-for="(child, index) in item.children" :key="index">
              <router-link :to="{ path: child.url }">
                {{ child.title }}
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "headerOne",
  data() {
    return {
      phone: "400-668-6008",
      navList: [
        {
          name: "",
          url: "/",
          title: "首页",
        },

        {
          name: "",
          url: "/center",
          title: "产品中心",
        },

        {
          url: "/design",
          title: "产品设计",
        },
        {
          name: "",
          url: "/center",
          title: "产品中心",
          children: [
            {
              name: "",
              url: "/center",
              title: "车险",
            },
            {
              name: "",
              url: "/center",
              title: "财产险",
            },
            {
              name: "",
              url: "/center",
              title: "责任险",
            },
            {
              name: "",
              url: "/center",
              title: "意外险",
            },
            {
              name: "",
              url: "/center",
              title: "工程险",
            },
            {
              name: "",
              url: "/center",
              title: "特色险",
            },
          ],
        },
        {
          name: "",
          url: "/Information",
          title: "行业资讯",
        },
        {
          name: "",
          url: "/us",
          title: "关于我们",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: #333333;
}
.headerTwo {
  width: 100%;
  z-index: 99999999999;
  .black {
    width: 100%;
    background: #363d41;
    .headeOne {
      display: flex;
      justify-content: space-between;
      // height: 70px;
      // line-height: 70px;
      .logo {
        a {
          width: 220px;
          height: 51px;
          line-height: 51px;
          margin-right: 80px;
          background-size: 1000px 1400px;
          vertical-align: middle;
          // background-image: url(../../images/new_bg.svg);
          display: inline-block;
          background-repeat: no-repeat;
          background-image: url("../assets/new_bg.svg");
          background-position: -405px -129px;
        }
      }
      .content {
        height: 51px;
        line-height: 51px;
        .phoneIcon {
          width: 21px;
          height: 22px;
          background-size: 1000px 1400px;
          display: inline-block;
          background-repeat: no-repeat;
          background-image: url("../assets/new_bg.svg");
          background-position: -385px -212px;
          vertical-align: middle;
        }
        .phone {
          color: #fff;
          margin: 0 10px;
        }
        .wchat {
          width: 26px;
          height: 22px;
          background-size: 1000px 1400px;
          display: inline-block;
          background-repeat: no-repeat;
          background-image: url("../assets/new_bg.svg");
          vertical-align: middle;
          background-position: -444px -212px;
        }
      }
    }
  }
  .white {
    width: 100%;
    background: #fff;
    ul {
      display: flex;
      justify-content: flex-start;
      > li {
        width: 6%;
        height: 50px;
        line-height: 50px;
        padding-right: 4%;
        position: relative;
        ul {
          position: absolute;
          top: 50px;
          left: -20%;
          width: 100%;
          display: none;
          // padding: 0 20px;
          background: rgba($color: #fff, $alpha: 1);
          li {
            width: 100%;
            line-height: 40px;
          }
        }
      }
      > li:hover {
        ul {
          display: block;
        }
      }
    }
  }
}
</style>
